<template>
  <div class="storecity">
    <div class="list">
      <popup v-model="regionVisible" position="bottom" class="region-popup w100">
        <div class="title flex border_b p_r30 p_l30">
          <div class="font_size28 color_0d " @click="cancalFn(1)" >取消</div>
          <div class="font_size32 color_33 flex-1 t_center">选择提货地址</div>
          <div class="font_size28 color_0d  t_right" @click="cancalFn(2)">确定</div>
        </div>
        <picker :slots="slots" valueKey="name"   @change="onValuesChange" :itemHeight="40"></picker>
        <div class="store font_size28">
          <div class="flex" style="padding: 15px 0px; border-top: 1px solid #dddddd" v-for="(store, index) in storelist" :key="index" @click="choosestoreFn(store.address,store.id)">
           <div class="flex-1">
             <span>{{store.address}}</span>     <span>联系电话：{{store.mobile}}</span>
           </div>
            <div class="t_center"><img v-if="store.checkstatus == 1" class="gou_icon" src="../../assets/img/icon/gougou.png"/></div>
          </div>
        </div>
      </popup>
    </div>
  </div>
</template>

<script>
  import { Picker } from 'mint-ui';
  import { Popup } from 'mint-ui';
  import "mint-ui/lib/style.css";
  export default {
    name: "storecity",
    data(){
      return{
        regionVisible: true,
        citylist: [],
        slots: [
          {
            flex: 1,
            defaultIndex: 0,
            values: [],  //省份数组
            className: 'slot1',
            textAlign: 'center'
          },
          {
            divider: true,
            content: '',
            className: 'slot2'
          },
          {
            flex: 1,
            values: [],
            className: 'slot3',
            textAlign: 'center'
          },
          {
            divider: true,
            content: '',
            className: 'slot4'
          },
          {
            flex: 1,
            values: [],
            className: 'slot5',
            textAlign: 'center'
          }
        ],

        myAddressProvince:'',
        myAddressCity:'',
        myAddresscounty:'',
        province_id:'',
        city_id:'',
        county_id:'',
        storelist: [],
        storename: '',
        storeid: '',
      }
    },
    components: {
      Picker,
      Popup,
    },
    props: {
      // regionVisible: {
      //   type: Boolean,
      //   default: false
      // }
    },
    mounted(){
      this.$nextTick(() => { //vue里面全部加载好了再执行的函数 （类似于setTimeout）
        this.slots[0].defaultIndex = 0
      })
    },
    created(){
      this.getcityList()
    },
    methods:{
      //获取城市列表， 省份
      getcityList(){
        var self = this
        self.$util.get('address/getPickUpAddressDistrictList',{
          uid: 1
        }).then(data => {
          if(data.data.length>0){
            self.citylist = data.data
            data.data.forEach(item_pro => {
              let obj = {};
              obj.name = item_pro.name;
              obj.id = item_pro.id;
              self.slots[0].values.push(obj)
            })
          }
        })
      },
      //获取市
      getcityFn(province) {
        var self = this
        let cityArr = [];
        self.citylist.forEach(function (item) {
          if (item.name == province && item.child) {
            item.child.forEach(function (args) {
              let obj = {};
              obj.name = args.name;
              obj.id = args.id;
              cityArr.push(obj);
            });
          }
        });
        return cityArr
      },
      //获取区县
      getcountryFn(province,city){
        var self = this
        let countyArr = [];
        self.citylist.forEach(function (item) {
          if (item.name === province) {
            item.child.forEach(function (args) {
              if (args.name === city) {
                args.child.forEach(function (param) {
                  let obj = {};
                  obj.name = param.name;
                  obj.id = param.id;
                  countyArr.push(obj);
                })
              }
            });
          }
        });
        return countyArr
      },

      //滑动改变值
      onValuesChange(picker, values) {
        var self = this
        if(values[0].name != undefined){
          console.log(values)

          //给市、县赋值
          picker.setSlotValues(1, this.getcityFn(values[0]["name"]));
          picker.setSlotValues(2, this.getcountryFn(values[0]["name"], values[1]["name"]))

          self.myAddressProvince = values[0]["name"]
          self.myAddressCity = values[1]["name"]
          self.myAddresscounty = values[2]["name"]
          self.province_id = values[0]["id"]
          self.city_id = values[1]["id"]
          self.county_id = values[2]["id"]

          self.getstoreaddressFn()

        }

      },
      // 关闭组件
      cancalFn(type){
        this.regionVisible = !this.regionVisible
        // var addinfo ={
        //   province: this.myAddressProvince,
        //   city: this.myAddressCity,
        //   country: this.myAddresscounty,
        //   province_id: this.province_id,
        //   city_id: this.city_id,
        //   country_id: this.county_id
        // }
        if(type == 2){
          var storeinfo = {
            store_name: this.storename,
            store_id: this.storeid
          }
          this.$store.commit('setstoreinfo', storeinfo)
        }

        // this.myAddressProvince = ''
        // this.myAddressCity = ''
        // this.myAddresscounty = ''
        // this.slots = []
      },
      getstoreaddressFn(){
        this.$util.get('address/getPickUpAddress',{
          uid: this.$store.state.userinfo.uid,
          // province_id: this.province_id,
          // city_id: this.city_id,
          // districts_id: this.county_id
          province_id: '',
          city_id: '',
          districts_id: ''
        }).then(data => {


          data.data.forEach(item => {
            item.checkstatus = 0
            console.log(item.checkstatus)
          })
          this.storelist = data.data

          console.log(this.storelist)

        })
      },
      choosestoreFn(name,id){
        this.storename = name
        this.storeid = name
          this.storelist.filter(item => {
            return item.id == id? item.checkstatus = 1: item.checkstatus =0
          })
      }
    }
  }
</script>

<style lang="less" scoped>
  @import "../../assets/css/common/cityLinkpage";
  .store{
    height: 300px;
    overflow: scroll;
    padding: 0px 30px;
  }
  .gou_icon{
    width: 37px;
    height: 27px;
  }
</style>
